import React from 'react';
import { Box, Typography, Paper } from '@mui/material';
import { useLocation } from 'react-router-dom';
import Layout from '../components/Layout';

const ReactBasics: React.FC = () => {
  const location = useLocation();
  const currentPath = location.pathname.split('/')[2] || 'introduction';

  const getContent = () => {
    switch (currentPath) {
      case 'introduction':
        return (
          <>
            <Typography variant="h4" gutterBottom>
              React简介
            </Typography>
            <Typography paragraph>
              React是一个用于构建用户界面的JavaScript库。它由Facebook开发和维护，主要用于构建单页应用程序。
            </Typography>
            <Box component="section" mt={3}>
              <Typography variant="h5" gutterBottom>
                React的特点
              </Typography>
              <Typography paragraph>React具有以下主要特点：</Typography>
              <Paper
                sx={{
                  p: 2,
                  backgroundColor: '#f5f5f5',
                  mb: 2,
                }}
              >
                <Typography component="div">
                  • 声明式编程：React使编写交互式UI变得容易
                  <br />
                  • 组件化：构建管理自身状态的封装组件
                  <br />• 跨平台：一次学习，随处编写
                </Typography>
              </Paper>
              <Typography variant="h5" gutterBottom>
                第一个React组件
              </Typography>
              <Paper
                sx={{
                  p: 2,
                  backgroundColor: '#f5f5f5',
                  '& pre': {
                    margin: 0,
                    fontFamily: 'monospace',
                    fontSize: '0.9rem',
                  },
                }}
              >
                <pre>{`import React from 'react';

function Welcome() {
  return <h1>Hello, React!</h1>;
}

export default Welcome;`}</pre>
              </Paper>
            </Box>
          </>
        );
      // 可以添加其他路径的内容
      default:
        return (
          <Typography variant="h5" color="textSecondary">
            正在建设中...
          </Typography>
        );
    }
  };

  return (
    <Layout>
      <Box sx={{ maxWidth: '800px', margin: '0 auto', p: 3 }}>{getContent()}</Box>
    </Layout>
  );
};

export default ReactBasics;
